// pages/shop-list/shop-list.js
import { hideLoading, showLoading } from "@/utils/util"

// map地图实例
let mpContext;

Page({

    data: {
        showMap: true, // 是否显示地图
        longitude: 0,  // 经度 -180~180, 
        latitude: 0, // 纬度-90~90
        scale: 13, // 缩放级别，取值范围为3-20, 默认16
        markers: [], // 门店标记点
        hasUserLocation: true, // 是否有权限获取当前位置
        activeTabName: 'near', // 当前的标签 near附近门店，collect收藏门店
        tabsTop: 100, // 标签到顶部的距离
    },

    async onLoad() {
        // map组件实例, 参数为map组件上的id值，注意：不要加#在前面
        mpContext = wx.createMapContext('shop-map')
        // console.log('mpContext', mpContext)
        
        // 获取标签到顶部距离：用于子组件指定滚动高度
        this.queryTabsSelector()

        // 获取当前用户位置坐标
        await this.initUserLocation()
        // 查询列表数据
        this.loadShopList()
        
    },

    // 切换显示隐藏地图
    toggleMap() {
        // this.queryTabsSelector后面不写括号()
        this.setData({showMap: !this.data.showMap}, this.queryTabsSelector)
    },

    /**
     点击搜索框打开地图选择位置,
     参考：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html
     需要在app.json中指定如下配置才可：
           "requiredPrivateInfos": [
                "chooseLocation"
            ]
     */
    async openChooseLoaction() {
        try {
             // console.log('openChooseLoaction')
            // 打开地图选择位置
            const res = await wx.chooseLocation()
            console.log('chooseLocation', res)

            // longitude 经度 -180~180, latitude 纬度-90~90
            const {longitude, latitude} = res
            this.setData({longitude, latitude})
            // 查询门店列表
            this.loadShopList()
        } catch (error) {
            console.error('获取位置失败', error)
        }
    },



    /**
     * 获取当前用户位置坐标
     * 参考：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
     * 1. app.json 中声明 
     *    "requiredPrivateInfos": [
                "getLocation"
            ]
        2. 报错：{"errMsg":"getLocation:fail no permission, appId=wxe6d9223da077c472"}
           解决：在app.json中配置
              "permission": {
                    "scope.userLocation": {
                        "desc": "你的位置信息将用于小程序搜索附近门店使用"
                    }
               }
     */
    async initUserLocation() {
        try {
            showLoading()
            const res = await wx.getLocation({ type: 'gcj02'})
            const {longitude, latitude} = res
            // 获取用户当前位置坐标成功，更新到地图上
            this.setData({ longitude, latitude })
            // console.log('initUserLocation', res)
        } catch (error) {
            console.error("获取用户当前位置失败", error)
            // 获取失败无权限：作一个无权限标识false, 展示【设置权限】按钮
            this.setData({ hasUserLocation: false })
        } finally {
            hideLoading()
        }
        
    },

    // 当设置权限页面后退时，会触发此事件，并传递最新的权限信息给此事件处理函数中
    openSettingCallback(e) {
        const { authSetting } = e.detail
        // 返回true用户已允许获取位置，反之不允许：无权限 
        const hasUserLocation = authSetting['scope.userLocation'] || false
        this.setData({ hasUserLocation })
        // console.log('openSettingCallback', hasUserLocation)
        // 允许获取位置，则重新调用获取当前位置逻辑
        if (hasUserLocation) {
            // this.initUserLocation()
            this.resetMapLocation()
        }
    },

    // 重置当前地图位置：
    async resetMapLocation() {
        // 获取当前用户位置
        await this.initUserLocation()
        // 重新查询列表数据（计算位置距离）
        this.loadShopList()
    },

    // 查询门店列表
    loadShopList() {
        // console.log('loadShopList')
        const {activeTabName} = this.data
        // 获取子组件实例
        const listComponent = this.selectComponent('#' + activeTabName)
        // 调用子组件的查询列表方法
        listComponent?.loadShopList()
    },

    // 切换标签
    changeTab(e) {
        // console.log('changeTab', e)
        const {name} = e.detail
        this.setData({ activeTabName: name })
        this.loadShopList()
    },

    // 更新地址的标记点 markers
    updateMapMarkers(e) {
        // console.log('updateMapMarkers', e)
        const { shopList } = e.detail 
        const markers = shopList.map((item, index) => {
            return {
                id: index, // 标记点id，点击标识点时会传递此id值
                longitude: item.location.coordinates[0],
                latitude: item.location.coordinates[1],
                iconPath: '/assets/images/location.png',
                width: '80rpx',
                height: '80rpx',
                callout: { // 气泡文字
                    content: item.name + "\n" + item.address,
                    borderRadius: 5,
                    padding: 5,
                    textAlign: 'center',
                    bgColor: '#000000b3',
                    color: '#fff',
                     // 'BYCLICK':点击显示; 'ALWAYS':常显
                    display: index === 0 ? 'ALWAYS': 'BYCLICK'
                }
            }
        })
        // console.log('markers', markers)
        this.setData({ markers, scale: 13 })

        // 将地图中心移动到第一个标记点
        setTimeout(() => {
            mpContext?.moveToLocation({
                longitude: shopList[0]?.location.coordinates[0],
                latitude: shopList[0]?.location.coordinates[1],
            })
        }, 300)
    },

    // 点击标记点进行触发此方法
    clickMarker(e) {
        // console.log('点击的标识点', e.detail.markerId)
        const {markerId} = e.detail
        // 点击第1个不处理 id=0, 
        // 点击非第1个标记, 且第1个是ALWAYS时，更新为 BYCLICK 点击显示
        if (markerId != 0 && this.data.markers[0].callout.display == 'ALWAYS') {
            this.setData({
                'markers[0].callout.display': 'BYCLICK'
            })
        }
    },

    // 获取标签到顶部的距离
    queryTabsSelector() {
        wx.createSelectorQuery()
            .select('#tabs-box')
            .boundingClientRect((res) => {
                //console.log('queryTabsSelector', res)
                this.setData({ tabsTop: res.top })
            })
            .exec() // 不要少了
    }
    
})